/**
 * Projects
 */
.project {
  margin-bottom: 1.66667em;

  .project-link {
    border: 0;
    color: _palette(charcoal);

    .palette-dark & {
      color: #fff;
    }
  }
}

.project-header {
  margin-top: 0.83333em;
}

.project-title {
  font-size: 1.33333em;
  margin: 0;
}

.project-thumbnail {
  border: 0;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;

  &:before {
    content: "";
    display: block;
    padding-top: 60%;
  }

  &:after {
    background: rgba(_palette(charcoal), .65);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: .3s ease;
    transition: .3s ease;
  }

  img {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: 1s ease;
    transition: 1s ease;
    width: 100%;
  }
}

.project-link {
  display: block;
  position: relative;

  &:hover,
  &:focus {
    img {
      -webkit-transform: scale(1.05,1.05);
      transform: scale(1.05,1.05);
    }
  }
}

@media only screen and (min-width: 761px) {
  .portfolio-feed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -0.83333em;
    margin-right: -0.83333em;

    .project {
      box-sizing: border-box;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      max-width: 50%;
      padding-left: 0.83333em;
      padding-right: 0.83333em;
    }

    &.layout-mosaic {
      .project {
        -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
        max-width: 60%;

        &:nth-child(4n+2),
        &:nth-child(4n+3) {
          -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
          max-width: 40%;

          .project-thumbnail {
            &:before {
              padding-top: calc(90% + 9px);
            }
          }
        }
      }
    }

    .project-header {
      box-sizing: border-box;
      left: 0;
      margin: 0;
      padding: 1.33333em;
      position: absolute;
      text-align: center;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
      z-index: 2;
    }

    .project-title {
      opacity: 0;
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }

    .project-link {
      color: #fff;

      &:hover,
      &:focus {
        .project-title {
          opacity: 1;
        }

        .project-thumbnail {
          &:after {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }
}